<template>
    <umrp-page bg-color="#f2f2f2">
        <umrp-container padding="10px" :gap="10">
            <!-- <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" direction="horizonal" justify="between">
                        <umrp-text>添加快递收货</umrp-text>
                        <umrp-text color="red">-￥33</umrp-text>
                    </umrp-container>
                </template>
</umrp-card> -->
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px">
                        <umrp-text-icon direction="horizonal" :size="4">官方自营</umrp-text-icon>
                        <umrp-divider></umrp-divider>
                        <umrp-media>
                            <umrp-container :gap="10">
                                <umrp-container direction="horizonal" justify="between">
                                    <umrp-text>商品名称 x1</umrp-text>
                                    <umrp-text>￥99</umrp-text>
                                </umrp-container>
                                <umrp-container direction="horizonal" justify="between">
                                    <umrp-text>商品规格</umrp-text>
                                    <umrp-text color="red">每件到手价￥66</umrp-text>
                                </umrp-container>
                            </umrp-container>
                        </umrp-media>
                        <umrp-divider></umrp-divider>
                        <umrp-container direction="horizonal" justify="end">
                            <umrp-text>应付：￥99</umrp-text>
                        </umrp-container>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" direction="horizonal" justify="between">
                        <umrp-text>促销立减</umrp-text>
                        <umrp-text color="red">-￥33</umrp-text>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" direction="horizonal" justify="between">
                        <umrp-text>优惠券</umrp-text>
                        <umrp-text color="#999">无可用</umrp-text>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card :border="false">
                <template #body>
                    <umrp-container padding="10px" direction="horizonal" justify="between">
                        <umrp-text>支付方式</umrp-text>
                        <umrp-text>微信支付</umrp-text>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-checkbox>我已阅读并同意《支付协议》</umrp-checkbox>
        </umrp-container>
        <umrp-action-bar>
            <umrp-container padding="10px" direction="horizonal" justify="between">
                <umrp-space direction="vertical">
                    <umrp-text>合计：￥66</umrp-text>
                    <umrp-text color="red">已立减￥33</umrp-text>
                </umrp-space>
                <umrp-button type="primary">去支付</umrp-button>
            </umrp-container>
        </umrp-action-bar>
    </umrp-page>
</template>